<template>
	<div style="height: 100%">
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
				<!--标题和边框基础风格-->
				<component-style :curComponent="curComponent"></component-style>
			</a-tab-pane>
			<a-tab-pane key="props" :tab="dialogI18n('common.property','属性')">
				<a-row>
					<a-col :span="24">
						<div v-for="(item,index) in propsList" :key="index">
							<div class="stats-comment">
								<span style="flex: 1">{{item.comment}}({{item.name}})</span>
								<rx-icon-show icon="icon-lineedit" @click="setProps(item)"></rx-icon-show>
							</div>
						</div>
					</a-col>
				</a-row>
			</a-tab-pane>
			<a-tab-pane key="event" :tab="dialogI18n('common.event','事件')">
				<a-collapse default-active-key="0" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel class="customDef-panel" :key="index" v-for="(item,index) in eventList" :header="item.name">
                        <template #extra >
                                <span class="checkbox-slot" @click.stop="">
                                    <rx-icon-show icon="icon-lineedit" @click="setEventFunc(item)"></rx-icon-show>
                                </span>
                        </template>
						<div v-if="config.events[item.name] && config.events[item.name].length>0">
							<div class="customDef-panel-head">
								<div>{{dialogI18n('common.calComponent','调用组件')}}</div>
								<div>{{dialogI18n('common.calMethod','调用方法')}}</div>
							</div>
							<div class="customDef-panel-comen" v-for="(method,index) in config.events[item.name]" :key="index">
								<div class="customDef-panel-component">{{getComponentName(method.component)}}</div><div class="customDef-panel-component" style="margin-left: 20px">{{method.method}}</div>
							</div>
						</div>
					</a-collapse-panel>
				</a-collapse>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
import EventFuncDialog from "@/views/modules/design/dialog/event-func-dialog.vue";
import {Util} from "@lowcode/jpaas-base-lib";
import PropsDialog from "@/views/modules/design/dialog/props-dialog.vue";

export default {
	name: "CustomDef",
	mixins:[ComponentDef],
	data(){
		return{
			propsList:[],
			methodList:[],
			eventList:[],
		}
	},
	created(){
		this.init();
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		dialogI18n(name,text,key){
			return this.$ti18(name,text,"dialogLang",key);
		},
		getComponentName(key){
			let componentName="";
			for (let i = 0; i < this.screenConfig.components.length; i++) {
				if(this.screenConfig.components[i].id==key){
					componentName=this.screenConfig.components[i].config.title || "";
					break;
				}
			}
			return componentName;
		},
		init(){
			if(!this.config.customName){
				return;
			}
            let files = import.meta.glob('@/views/modules/custom-components/**/*.json');
            for (let path in files) {
                files[path]().then(mod => {
                    let file=  mod["default"];
                    if(this.config.customName==file.name){
                        this.propsList=file.props;
                        this.methodList=file.methods;
                        this.eventList=file.events;
                    }
                });
            }
		},
		setEventFunc(eventItem){
			let self=this;
			let item=JSON.parse(JSON.stringify(eventItem));
			item.eventConfig=self.config.events[eventItem.name] || "";
			let conf = {
				component: EventFuncDialog,
				data: {
					config: this.config,
					screenConfig: this.screenConfig,
					eventItem: item
				},
                zIndex:999,
				curVm: this,
				widthHeight: ['900px', '600px'],
				title: this.dialogI18n("common.eventConfig","事件配置")
			}
			Util.open(conf, function (action, config) {
				if (action != "ok") return;
                self.config.events[eventItem.name]=config;
			});
		},
		setProps(propsItem){
			let self=this;
			let item=JSON.parse(JSON.stringify(propsItem));
			item.propsConfig=self.config.props[propsItem.name] || "";
			let conf = {
				component: PropsDialog,
				data: {
					config: this.config,
					screenConfig: this.screenConfig,
					propsItem: item
				},
				curVm: this,
                zIndex:999,
				widthHeight: ['800px', '600px'],
				title: this.dialogI18n("common.propsConfig","属性配置")
			}
			Util.open(conf, function (action, config) {
				if (action != "ok") return;
                self.config.props[propsItem.name]=config;
			});
		}
	}
}
</script>

<style lang="less">
.customDef-panel-head{
	height: 40px;
	line-height: 40px;
	display: flex;
	div{
		padding-left: 20px;
		flex: 1;
		color: #555555;
	}
}
.customDef-panel-comen{
	display: flex;
	padding: 0px 14px 14px 14px;
}
.customDef-panel-component{
	height: 40px;
	line-height: 40px;
	background-color: #f8f8f8;
	border-radius: 4px;
	border: solid 1px #dedede;
	color: #333333;
	padding: 0px 14px;
	overflow: hidden;
	flex: 1;
}
.stats-comment{
	width: 390px;
	height: 40px;
	border-radius: 4px;
	border: solid 1px #dedede;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	padding: 0px 14px;
}
.stats-comment i:hover{
	color: #4285f4;
}
.customDef-panel{
	border-radius: 4px;
	border: solid 1px #dedede!important;
	margin-bottom: 16px;
	.ant-collapse-header{
		border-bottom: solid 1px #dedede;
		padding: 14px 13px 14px 33px!important;
	}
	.ant-collapse-arrow{
		left: 13px!important;
	}
}
</style>
